<template>
  <div class="goods" @click="goDetail">
<!--    <img class="goodsImg" :src=item.mainImg>-->
    <van-image
        class="goodsImg"
        lazy-load
        :src=item.mainImg
    >
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
    <div class="van-multi-ellipsis--l2 title">
      {{item.title}}
    </div>
    <div class="des flex flex-between">
      <div>
        <span class="character price-color">￥</span>
        <span class="price price-color">{{integer}}</span>
        <span class="price-color decimal">.{{decimal}}</span>
        <span class="count">{{ item.payCount }}人付款</span>
      </div>
      <van-icon class="marginAuto0" name="ellipsis" size=".4rem" color="#999999"
      @click="onMoreClick" @click.stop/>
    </div>
  </div>

</template>

<script>
import Vue from 'vue';
import { Image as VanImage } from 'vant';
import { Lazyload } from 'vant';
import { Loading } from 'vant';

Vue.use(Lazyload);
Vue.use(Loading);
Vue.use(VanImage);
export default {
  name: "goods",
  props: {
    item:{
      type:Object,
      default(){
        return{
          title:"title",
          img: require("@/assets/logo.png"),
          price:888,
          payCount:888,
          id:""
        }
      }
    },
  },
  data(){
    return{
      maskShow:true,
    }
  },
  computed:{
    integer(){
      let price=this.item.price;
      return parseInt(price);
    },
    decimal(){
      let price=this.item.price;
       let num=price*100-parseInt(price)*100;
      return num;
    }
  },
  methods:{
    goDetail(){
      this.$router.push("/goodsDetail?id="+this.item.id)
    },
    onMoreClick(){
      this.maskShow=true;
    }
  }
}
</script>

<style lang="less" scoped>
.goods {
  border-radius: .2rem;
  width: 4.5rem;
  background-color: #fff;
  margin: .2rem 0 .2rem 0;
  .goodsImg {
    width: 4.5rem;
    height: 5rem;
    border-radius: .2rem .2rem 0 0;
  }

  .title {
    font-size: .45rem;
    width: 4.5rem;
  }

  .des {
    margin:.2rem .1rem;
    .character {
      font-size: .3rem;
    }

    .price {
      font-size: .5rem;
    }

    .decimal{
      font-size: .4rem;
    }
    .count {
      margin-left: .2rem;
      font-size: .3rem;
      color: #999999;
    }
  }

}
.mask{
  background-color: rgba(0,0,0,.6);
  z-index: 1;
}

</style>